<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <!--          <el-form-item label="项目名称">-->
          <!--            <el-input v-model="listQuery.proName"-->
          <!--                      placeholder="请输入"-->
          <!--                      clearable/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="责任人">-->
          <!--            <el-input v-model="listQuery.proPersonLiable"-->
          <!--                      placeholder="请输入"-->
          <!--                      clearable/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="所属部门">-->
          <!--            <el-select v-model="listQuery.proDepartment"-->
          <!--                       placeholder="请选择部门">-->
          <!--              <el-option v-for="item in departmentList"-->
          <!--                         :key="item.departmentName"-->
          <!--                         :label="item.departmentName"-->
          <!--                         :value="item.departmentName">-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="日志起止时间：">
            <div class="block">
              <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="日志内容查询：">
            <el-input v-model="listQuery.dayLogs"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini"
                     @click="reset" type="info">重置
          </el-button>

        </div>
      </template>
    </search-box>

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="我的日志" name="1">

        <el-button size="mini"
                   type="success" @click="handleCreate">新增
        </el-button>
        <div class="table-wrap">
          <el-table :data="list"
                    style="width:100%"
                    element-loading-text="Loading"
                    height="600">
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>

            <el-table-column prop="dayLogType"
                             label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.dayLogType == 1">日志</span>
                <span v-else-if="scope.row.dayLogType == 2">外出</span>
              </template>
            </el-table-column>
            <el-table-column prop="dayLogs"
                             label="日志内容">
              <template slot-scope="scope">
                <span :title="scope.row.dayLogs">{{scope.row.dayLogs}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="proName"
                             label="项目名称">
            </el-table-column>
            <el-table-column prop="dayLogTime"
                             label="日志日期">
              <template slot-scope="scope">
                {{scope.row.dayLogTime}}
              </template>
            </el-table-column>
            <el-table-column prop="createDate"
                             label="填写时间">
              <template slot-scope="scope">
                {{scope.row.createDate}}
              </template>
            </el-table-column>


            <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
                  编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>

          </el-table>
          <pagination v-show="total>0"
                      :total="total"
                      :page.sync="listQuery.pageNumber"
                      :limit.sync="listQuery.pageSize"
                      @pagination="getList"/>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我的外出" name="2">

        <el-button size="mini"
                   type="success" @click="handleCreate">新增
        </el-button>
        <div class="table-wrap">
          <el-table :data="listOut"
                    style="width:100%"
                    element-loading-text="Loading"
                    height="600">
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>

            <el-table-column prop="dayLogType"
                             label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.dayLogType == 1">日志</span>
                <span v-else-if="scope.row.dayLogType == 2">外出</span>
              </template>
            </el-table-column>
            <el-table-column prop="dayLogs"
                             label="日志内容">
              <template slot-scope="scope">
                <span :title="scope.row.dayLogs">{{scope.row.dayLogs}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="cfAddress"
                             label="出发地">
            </el-table-column>
            <el-table-column prop="mdAddress"
                             label="目的地">
            </el-table-column>
            <el-table-column prop="vehicle"
                             label="交通工具">
            </el-table-column>
            <el-table-column prop="money"
                             label="费用金额">
            </el-table-column>
            <el-table-column prop="outTime"
                             label="外出时间">
              <template slot-scope="scope">
                {{scope.row.outTime}}
              </template>
            </el-table-column>

            <el-table-column prop="inTime"
                             label="返回时间">
              <template slot-scope="scope">
                {{scope.row.inTime}}
              </template>
            </el-table-column>
            <el-table-column prop="createDate"
                             label="填写时间" width="200">
              <template slot-scope="scope">
                {{scope.row.createDate}}
              </template>
            </el-table-column>


            <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
                  编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>

          </el-table>
          <pagination v-show="totalOut>0"
                      :total="totalOut"
                      :page.sync="listQuery.pageNumber"
                      :limit.sync="listQuery.pageSize"
                      @pagination="getListOut"/>
        </div>
      </el-tab-pane>


    </el-tabs>


    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisibleDayLog"
      width="30%"
      style="margin-top: -5%"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">

        <el-form-item label="日志类型" prop="dayLogType">
          <el-select v-model="form.dayLogType"
                     placeholder="请选择类型">
            <el-option v-for="item in dayLogTypeList"
                       :key="item.dayLogType"
                       :label="item.dayLogType"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日志内容" prop="dayLogs">
          <el-input v-model="form.dayLogs" type="textarea" :rows="5"></el-input>
        </el-form-item>


        <el-form-item label="项目部门">
          <el-select v-model="form.proDepartment" @change="getProList"
                     placeholder="请选择日志所属项目部门">
            <el-option v-for="item in departmentList"
                       :key="item.departmentName"
                       :label="item.departmentName"
                       :value="item.departmentName">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="项目名称" prop="proName">
          <el-select v-model="form.proName" filterable placeholder="请选择">
            <el-option
              v-for="item in proList"
              :key="item.proCode"
              :label="item.proName"
              :value="item.proName">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="日志日期" prop="dayLogTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.dayLogTime" style="width: 100%;"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

        <el-form-item label="日志受理人部门">

          <el-select v-model="form.departmentName1" @change="getUsersList"
                     placeholder="请选择日志受理人部门">
            <el-option v-for="item in departmentList"
                       :key="item.departmentName"
                       :label="item.departmentName"
                       :value="item.departmentName">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="日志受理人" prop="receiverPeople">
          <el-select v-model="form.receiverPeople"
                     placeholder="请选择日志受理人">
            <el-option v-for="item in usersList"
                       :key="item.userName"
                       :label="item.userName"
                       :value="item.userName">
            </el-option>
          </el-select>

        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisibleOut"
      width="30%"
      style="margin-top: -5%"
    >
      <el-form ref="form" :rules="rulesOut" :model="form" label-width="120px">

        <el-form-item label="日志类型" prop="dayLogType">
          <el-select v-model="form.dayLogType"
                     placeholder="请选择类型">
            <el-option v-for="item in dayLogTypeList"
                       :key="item.dayLogType"
                       :label="item.dayLogType"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日志内容" prop="dayLogs">
          <el-input v-model="form.dayLogs" type="textarea" :rows="5"></el-input>
        </el-form-item>

        <el-form-item label="出发地" prop="cfAddress">
          <el-input v-model="form.cfAddress"></el-input>
        </el-form-item>

        <el-form-item label="目的地" prop="mdAddress">
          <el-input v-model="form.mdAddress"></el-input>
        </el-form-item>

        <el-form-item label="交通工具" prop="vehicle">
          <el-input v-model="form.vehicle"></el-input>
        </el-form-item>

        <el-form-item label="费用金额" prop="money">
          <el-input v-model="form.money"></el-input>
        </el-form-item>

        <el-form-item label="外出时间" prop="outTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.outTime" style="width: 100%;"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

        <el-form-item label="返回时间" prop="inTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.inTime" style="width: 100%;"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

        <el-form-item label="日志受理人部门">


          <el-select v-model="form.departmentName1" @change="getUsersList"
                     placeholder="请选择日志受理人部门">
            <el-option v-for="item in departmentList"
                       :key="item.departmentName"
                       :label="item.departmentName"
                       :value="item.departmentName">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="日志受理人" prop="receiverPeople">
          <el-select v-model="form.receiverPeople"
                     placeholder="请选择日志受理人">
            <el-option v-for="item in usersList"
                       :key="item.userName"
                       :label="item.userName"
                       :value="item.userName">
            </el-option>
          </el-select>

        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="onSubmit">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as apiUser from '@/api/user'
  import * as dayLogs from '@/api/dayLogs/dayLogs'
  import * as myProject from '@/api/projectOa/myProject'
  import * as department from '@/api/system-setting/department'
  import * as position from '@/api/system-setting/position'
  import * as user from '@/api/system-setting/user'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  // 当然你也可以为了方便使用，将它注册到全局
  import { MessageBox } from 'element-ui'
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'

  export default {
    name: 'department',
    components: { Pagination, searchBox },
    directives: { waves },
    filters: {},
    data() {
      return {
        list: null,
        listOut: null,
        total: 0,
        totalOut: 0,
        dialogVisibleDayLog: false,
        dialogVisibleOut: false,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          departmentName: '',
          departmentName1: '',
          departmentCode: '',
          positionName: '',
          roleName: '',
          pageSize: 10,
          name: undefined,
          proPersonLiable: undefined,
          proDepartment: undefined,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        departmentList: [],

        usersList: [],
        listParent: [],
        form: {},

        proList: [],

        dayLogTypeList: [
          { 'dayLogType': '日志', 'value': 1 },
          { 'dayLogType': '外出', 'value': 2 }
        ],

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value1: [],
        value2: '',

        dialogTitle: '',

        activeName: '1',

        rulesList: [
          { label: '管理员', value: '管理员' },
          { label: '言川一级用户', value: '言川一级用户' },
          { label: '言川二级用户', value: '言川二级用户' },
          { label: '言川三级用户', value: '言川三级用户' }

        ],

        rules: {
          dayLogType: [{ required: true, message: '日志类型必填', trigger: 'blur' }],
          dayLogs: [{ required: true, message: '日志内容必填', trigger: 'blur' }],
          receiverPeople: [{ required: true, message: '日志受理人必选', trigger: 'blur' }],
          proName: [{ required: true, message: '项目名称必选', trigger: 'blur' }],
          dayLogTime: [{ required: true, message: '日志日期必选', trigger: 'blur' }]
        },

        rulesOut: {
          dayLogType: [{ required: true, message: '日志类型必填', trigger: 'blur' }],
          dayLogs: [{ required: true, message: '日志内容必填', trigger: 'blur' }],
          cfAddress: [{ required: true, message: '出发地必填', trigger: 'blur' }],
          mdAddress: [{ required: true, message: '目的地必填', trigger: 'blur' }],
          vehicle: [{ required: true, message: '交通工具必填', trigger: 'blur' }],
          money: [{ required: true, message: '费用金额必填', trigger: 'blur' }],
          outTime: [{ required: true, message: '外出时间必选', trigger: 'blur' }],
          inTime: [{ required: true, message: '返回时间必选', trigger: 'blur' }],
          receiverPeople: [{ required: true, message: '日志受理人必选', trigger: 'blur' }]

        }
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created() {
      this.getList()
      this.getRoleList()
      this.getDepartmentList()
      this.getDepartmentList1()

      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })

    },
    mounted() {
      // 测试用
      // var that = this
      // setTimeout(function() {
      //   that.dialogFormVisible = true
      // }, 5000)

      // alert(this.$store.getters.selectedTenantId);
    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: {
      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        //获取后端数据
        this.listQuery.dayLogType = 1
        const { content } = await dayLogs.getDayLogsInfoList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
        // console.log(this.list)
      },
      async getListOut() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        //获取后端数据
        this.listQuery.dayLogType = 2
        const { content } = await dayLogs.getDayLogsInfoList(this.listQuery)
        this.listOut = content.list
        this.totalOut = content.totalCounts
      },

      async getListParent() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }

        //获取后端数据
        const { content } = await myProject.getProjectListParent(this.listQuery)
        console.log('content', content)
        this.listParent = content

      },

      async getDepartmentList() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList = content.list

      },
      async getDepartmentList1() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList1 = content.list

      },

      async getRoleList() { // 获取列表数据

        const { content } = await department.getRoleList(this.listQuery)
        this.rulesList = content.list

      },
      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      handleCreate() {

        if (this.activeName == 1) {
          this.dialogVisibleDayLog = true
          this.dialogTitle = '日志新增'

        } else if (this.activeName == 2) {
          this.dialogVisibleOut = true
          this.dialogTitle = '外出新增'

        }
        this.form = {}
        this.getListParent()
      },
      handleUpdate(row) {
        if (this.activeName == 1) {
          this.dialogVisibleDayLog = true
          this.dialogTitle = '日志编辑'

        } else if (this.activeName == 2) {
          this.dialogVisibleOut = true
          this.dialogTitle = '外出编辑'

        }
        this.form = row
        this.getListParent()

      },

      handleDelete(row) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dayLogs.deleteDayLogsInfo(row.id).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            if (this.activeName == 1) {
              this.getList()

            } else if (this.activeName == 2) {
              this.getListOut()

            }
          })
        }).catch(() => {
        })

      },

      reset() {
        this.listQuery.dayLogs = ''
        this.value1 = []

        this.getList()
      },
      cancel() {
        this.listQuery.proName = ''
        this.listQuery.proPersonLiable = ''
        this.listQuery.proDepartment = ''
        this.listQuery.dayLogs = ''
        this.usersList = []
        this.dialogVisibleDayLog = false
        this.dialogVisibleOut = false
        this.getList()
      },
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.tenantId = this.$store.getters.selectedTenantId
            if (this.dialogTitle == '日志新增' || this.dialogTitle == '外出新增') {
              dayLogs.createDayLogsInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.proName = ''
                  this.listQuery.proPersonLiable = ''
                  this.listQuery.proDepartment = ''
                  this.listQuery.dayLogs = ''
                  this.usersList = []
                  this.dialogVisibleDayLog = false
                  this.dialogVisibleOut = false

                  if (this.activeName == 1) {
                    this.getList()

                  } else if (this.activeName == 2) {
                    this.getListOut()

                  }

                }
              })
            } else if (this.dialogTitle == '日志编辑' || this.dialogTitle == '外出编辑') {
              dayLogs.updateDayLogsInfo(this.form).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.proName = ''
                  this.listQuery.proPersonLiable = ''
                  this.listQuery.proDepartment = ''
                  this.listQuery.dayLogs = ''
                  this.usersList = []
                  this.dialogVisibleDayLog = false
                  this.dialogVisibleOut = false

                  if (this.activeName == 1) {
                    this.getList()

                  } else if (this.activeName == 2) {
                    this.getListOut()

                  }

                }
              })
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })

      }
      ,
      async getUsersList() { // 获取列表数据
        this.usersList = []

        const { content } = await user.getUserList(this.form)
        this.usersList = content.list

      },
      async getProList() { // 获取列表数据
        this.proList = []

        const { content } = await myProject.getProjectList(this.form)
        this.proList = content.list

      },

      handleClick(tab, event) {

        if (this.activeName == 1) {
          this.getList()

        } else if (this.activeName == 2) {
          this.getListOut()

        }

        console.log(this.activeName)

      }

    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }
</style>
